<template>
    <div>
         <TopBar :title="title"></TopBar>
         <div class="last-detail">
                <!--图片-->
                <div class="last-img">
                    <img :src="img" alt="">
                </div>
                <div class="last-bottom">
                    <!--简介-->
                    <div class="last-1">影片简介</div>
                    <div class="last-2">
                        <span>导&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演：</span>
                        <span>{{detailobj.director}}</span>
                    </div>
                    <div class="last-2">
                        <span>主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;演：</span>
                        <span>{{detailobj.zhuyan}}</span>
                    </div>
                    <div class="last-2">
                        <span>地区语言：</span>
                        <span>{{detailobj.nation}} （{{detailobj.language}}）</span>
                    </div>
                    <div class="last-2">
                        <span>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</span>
                        <span>{{detailobj.category}}</span>
                    </div>
                    <div class="last-2">
                        <span>上映日期</span>
                        <span>{{detailobj.premiereAt | formatDate}}</span>
                    </div>
                    <!--影片叙述-->
                    <div class="last-last">{{detailobj.synopsis}}</div>
                </div>

            </div>
    </div>
</template>
<script>
    import TopBar from './TopBar.vue';
    import $ from 'jquery';
    export default {
        data:function(){
            return {
                detailobj:{},
                title:'',
                img:''
            }
        },
        filters: {
            'formatDate': function(val) {
                var time = new Date(val);
                var m = time.getMonth() + 1;
                var d = time.getDate();
                return m + '月' + d + '日上映';
            }
        },
        components:{
            TopBar
        },
        mounted:function(){
            
             var that = this;
             var url = 'http://localhost:3000/'+ this.$route.params.id +'?time='+new Date().getTime();
              $.get(url,function(res){
                    // console.log(res);
                    that.detailobj = res.data.film;
                    that.title = res.data.film.name;
                    that.img = res.data.film.cover.origin;
                    var str = '';
                     for(var i = 0;i<that.detailobj.actors.length;i++){
                            str+=that.detailobj.actors[i].name+'|';
                     }
                     
                     that.detailobj['zhuyan'] = str;
                })

                
            
        }
    }
</script>
